<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta author="tianjindong.cn 田金东">
<title>注册 - 听到微笑的博客 - Thousands Find</title>
<link rel="stylesheet" type="text/css" href="/css/register-login.css">
<link rel="shortcut icon" href="/images/icon/favicon.ico">
<style type="text/css">
.error {
	color: red;
	padding-left: 10px;
}
</style>
</head>
<body>
	<div id="box"></div>
	<div class="cent-box register-box">
		<div class="cent-box-header">
			<h1 class="main-title hide" onclick="window.location.href='${pageContext.request.contextPath}/index.html'" style="cursor: pointer;">听到微笑的博客</h1>
			<h2 class="sub-title">生活热爱分享 - Thousands Find</h2>
		</div>

		<div class="cont-main clearfix">
			<form id="registerForm" method="post" action="${pageContext.request.contextPath }/account/register.action">
				<div class="index-tab">
					<div class="index-slide-nav">
						<a href="/login.html">登录</a> <a href="/register.html" class="active">注册</a>
						<div class="slide-bar slide-bar1"></div>
					</div>
				</div>

				<div class="login form">
					<div class="group">
						<div class="group-ipt email">
							<input type="email" name="email" id="email" class="ipt" placeholder="邮箱地址" value="${email }">
						</div>
						<div class="group-ipt user">
							<input type="text" name="username" id="user" class="ipt" placeholder="选择一个用户名" value="${username }">
						</div>
						<div class="group-ipt password">
							<input type="password" name="password" id="password" class="ipt" placeholder="设置登录密码" value="${password }">
						</div>
						<div class="group-ipt password1">
							<input type="password" name="repassword" id="password1" class="ipt" placeholder="重复密码">
						</div>
						<div class="group-ipt verify">
							<input type="text" name="checkCode" id="verify" class="ipt" placeholder="输入验证码"> <img src="${pageCntext.request.contextPath }/validatecode.action" class="imgcode">
						</div>
						<c:if test="${error!=null and error=='checkCodeError' }">
							<label id="verify-error" class="error" for="verify">验证码错误</label>
						</c:if>
					</div>
				</div>

				<div class="button">
					<button type="submit" class="login-btn register-btn" id="button">注册</button>
				</div>
			</form>
		</div>
	</div>

	<jsp:include page="common/footer.jsp" />

	<script src='/js/login-particles.js' type="text/javascript"></script>
	<script src='/js/login-background.js' type="text/javascript"></script>
	<script src='/js/jquery-2.1.4.min.js' type="text/javascript"></script>
	<script src='/js/login-layer/layer.js' type="text/javascript"></script>
	<script src='/js/jquery.validate.min.js' type="text/javascript"></script>
	<script src="/js/console.js"></script>
	<script>
		$('.imgcode').hover(function() {
			layer.tips("看不清？点击更换", '.verify', {
				time : 6000,
				tips : [ 2, "#3c3c3c" ]
			})
		}, function() {
			layer.closeAll('tips');
		}).click(function() {
			$(this).attr('src', '${pageCntext.request.contextPath }/valiadatecode.action?id=' + Math.random());
		})
	
		$(".login-btn").click(function() {
			var email = $("#email").val();
			var password = $("#password").val();
			var verify = $("#verify").val();
			// $.ajax({
			// url: 'http://www.zrong.me/home/index/userLogin',
			// type: 'post',
			// jsonp: 'jsonpcallback',
			//       jsonpCallback: "flightHandler",
			// async: false,
			// data: {
			// 	'email':email,
			// 	'password':password,
			// 	'verify':verify
			// },
			// success: function(data){
			// 	info = data.status;
			// 	layer.msg(info);
			// }
			// })
	
		})
		$("#remember-me").click(function() {
			var n = document.getElementById("remember-me").checked;
			if (n) {
				$(".zt").show();
			} else {
				$(".zt").hide();
			}
		});
	
		//添加用户名校验
		$.validator.addMethod(
			"checkUsername",
			function(value, element, params) {
				//定义一个标志
				var flag = false;
				//此时使用ajax后台校验用户名是否正确
				$.ajax({
					"async" : false,
					"url" : "${pageContext.request.contextPath}/account/regist/checkUsername.action",
					"data" : {
						"username" : value
					},
					"type" : "POST",
	
					"dataType" : "json",
					//这里的data是服务器传来的一个json字符串，前端解析为JS对象（里面包含是否存在该用户的信息）
					"success" : function(data) {
						//data.isExist==false代表服务器不存在该用户
						flag = data.isExist;
					}
				});
				//返回false代表该校验器不通过
				return !flag;
			}
		);
		//添加邮箱校验
		$.validator.addMethod(
			"checkEmail",
			function(value, element, params) {
				//定义一个标志
				var flag = false;
				//此时使用ajax后台校验用户名是否正确
				$.ajax({
					"async" : false,
					"url" : "${pageContext.request.contextPath}/account/regist/checkEmail.action",
					"data" : {
						"email" : value
					},
					"type" : "POST",
					"dataType" : "json",
					//这里的data是服务器传来的一个json字符串，前端解析为JS对象（里面包含是否存在该用户的信息）
					"success" : function(data) {
						//data.isExist==false代表服务器不存在该用户
						flag = data.isExist;
					}
				});
				//返回false代表该校验器不通过
				return !flag;
			}
		);
		$(function() {
			$("#registerForm").validate({
				rules : {
					"username" : {
						"required" : true,
						"rangelength" : [ 6, 15 ],
						"checkUsername" : true
					},
					"email" : {
						"required" : true,
						"email" : true,
						"checkEmail" : true
					},
					"password" : {
						"required" : true,
						"rangelength" : [ 6, 15 ],
					},
					"repassword" : {
						"required" : true,
						"equalTo":"#password"
					},
					"checkCode":{
						"required" : true
					}
					
				},
				messages : {
					"username" : {
						"required" : "用户名不能为空",
						"rangelength" : "请输入6-15位用户名",
						"checkUsername" : "用户名已存在"
					},
					"email" : {
						"required" : "邮箱不能为空",
						"email" : "请输入正确的邮箱格式",
						"checkEmail" : "该邮箱已经被注册"
					},
					"password" : {
						"required" : "密码不能为空",
						"rangelength" :"请输入6-15位密码"
					},
					"repassword" : {
						"required" : "请再次确认密码",
						"equalTo":"两次输入的密码不相同"
					},
					"checkCode":{
						"required" : "请输入验证码"
					}
				}
			});
		});
	</script>
</body>
</html>